import React, {  useState,useEffect } from "react";
import { Tabs } from "antd-mobile";
import axios from "axios";
function Doctor() {
  const [data, setData] = useState([]);
  const [activeKey, setActiveKey] = useState("follow");

useEffect(() => {
  if(activeKey=="doctor"){
    axios.get("/api/nation/findDoctor").then((res) => {
        console.log(res.data);
        setData(res.data.data);
      });
}else if(activeKey=="hospital"){
    console.log(activeKey);
    axios.post("/api/hospital/selectAllHospital").then((res) => {
        console.log(res.data);
        setData(res.data.data);
      });
}
}, [activeKey]);
  return (
    <>
      <Tabs activeKey={activeKey} onChange={setActiveKey}
      style={{
        "--title-font-size": "16px",
        "--active-title-color": "rgb(46 44 44)",
        "--active-line-color": "rgba(65, 208, 129, 1)",
      }}>
        <Tabs.Tab title="关注" key="follow">
        <div className="guan_box_11 flex-row">
          <div className="guan_box_12 flex-col" />
          <div className="guan_box_13 flex-col">
            <div className="guan_image-wrapper_2 flex-col">
              <img  alt="" 
                className="guan_label_1"
                src={
                  "https://lanhu.oss-cn-beijing.aliyuncs.com/psvmyg91oj19eqioumfbq0ubm3uf261s82sa7a1d09a-ea28-4964-890d-cd831d015bfe"
                }
              />
            </div>
          </div>
          <img alt=""
            className="guan_label_2"
            src={
              "https://lanhu.oss-cn-beijing.aliyuncs.com/psyw1wz66vfbk4mfg2rngm66txaqbrafaw1efa21be-9089-4562-924b-7b6a13627590"
            }
          />
          <img alt=""
            className="guan_image_7"
            src={
              "https://lanhu.oss-cn-beijing.aliyuncs.com/pss1xbsjjf6j00q6se93nhicyvbrduk98b6cf829bb-ca5b-472a-9082-03312a0d0349"
            }
          />
          <img alt=""
            className="guan_image_8"
            src={
              "https://lanhu.oss-cn-beijing.aliyuncs.com/psczmfbkp54c7hne25nenethdyp04nqq7p9bd0b836-66d5-4374-8fc8-48f80b77d478"
            }
          />
          <div className="guan_image-wrapper_3 flex-col">
            <img alt=""
              className="guan_thumbnail_1"
              src={
                "https://lanhu.oss-cn-beijing.aliyuncs.com/pswp5i0k4fz9evkz23via7e8cgjqpvmie365d5b4bbd-784a-4a1c-adb1-124f460a910c"
              }
            />
          </div>
        </div>
        <div className="guan_box_14 flex-col" />
        <span className="guan_text_22">您还没有任何关注</span>
        </Tabs.Tab>
        <Tabs.Tab title="医生" key="doctor">
          <div className="followDoctor_box_2 flex-col">
                <div className="followDoctor_block_2 flex-row">
                  <img alt=""
                    className="followDoctor_single-avatar_2"
                    src={
                      "https://lanhu.oss-cn-beijing.aliyuncs.com/ps95qxq5w5367hu4uyxt4abw4v8qmsp8fb16637c37-ac79-4867-908f-e2f7cbb7eb51"
                    }
                  />
                  <div className="followDoctor_group_13 flex-col justify-between">
                    <span className="followDoctor_text_21">王珏</span>
                    <div className="followDoctor_tag_3 flex-col">
                      <span className="followDoctor_text_22">三甲</span>
                    </div>
                  </div>
                  <div className="followDoctor_group_14 flex-col justify-between">
                    <div className="followDoctor_text-wrapper_2 flex-row justify-between">
                      <span className="followDoctor_text_23">主任医师</span>
                      <span className="followDoctor_text_24">骨科</span>
                    </div>
                    <span className="followDoctor_text_25">
                      郑州大学第一附属医院
                    </span>
                  </div>
                </div>
                <div className="followDoctor_text-wrapper_3 flex-row">
                  <span className="followDoctor_paragraph_1">
                    擅长：腰椎间盘突出、腰椎管狭窄症、腰椎滑蜕
                    <br />
                    颈椎病、胸椎管狭窄症、骨质疏松性椎体...
                  </span>
                </div>
                <div className="followDoctor_text-wrapper_4 flex-row">
                  <span className="followDoctor_text_26">综合好评</span>
                  <span className="followDoctor_text_27">100%</span>
                  <span className="followDoctor_text_28">评价量</span>
                  <span className="followDoctor_text_29">405</span>
                  <span className="followDoctor_text_30">患者量</span>
                  <span className="followDoctor_text_31">2802</span>
                </div>
                <div className="followDoctor_block_3 flex-row">
                  <span className="followDoctor_text_32">￥120</span>
                  <span className="followDoctor_text_33">起</span>
                  <span className="followDoctor_text_34 ">可问诊</span>
                  <div className="followDoctor_group_15 flex-col" />
                  <span className="followDoctor_text_35">￥600</span>
                  <span className="followDoctor_text_36">起</span>
                  <span className="followDoctor_text_37">私人医生</span>
                </div>
              </div>
        {data.map((item, index) => (
           <div className="followDoctor_box_3 flex-col" key={index}>
           <div className="followDoctor_box_4 flex-row">
             <div className="followDoctor_image-text_2 flex-row">
               <img alt=""
                 className="followDoctor_single-avatar_3 "
                 src={
                   "https://lanhu.oss-cn-beijing.aliyuncs.com/psiijuakpfv52zxxwfoiesu2zzr18yce602b6e28e-671e-48a8-a05d-04ec08d996c1"
                 }
               />
               <div className="followDoctor_text-group_2 flex-col justify-between">
                 <div className="followDoctor_text-wrapper_5 flex-row justify-between">
                   <span className="followDoctor_text_38">{item.name}</span>
                   <span className="followDoctor_text_39">{item.position}</span>
                 </div>
                 <span className="followDoctor_text_40">
                   郑州大学第一附属医院
                 </span>
               </div>
               <div className="followDoctor_tag_4 flex-col">
                 <span className="followDoctor_text_41 ">三甲</span>
               </div>
             </div>
             <span className="followDoctor_text_42 ">儿科门诊</span>
           </div>
           <span className="followDoctor_paragraph_2 ">
             擅长：小二重症多发创伤/小儿运动系统畸形、
             <br />
             小儿发育性髋关节脱位、小儿骨肿瘤...
           </span>
           <div className="followDoctor_text-wrapper_6 flex-row">
             <span className="followDoctor_text_43">综合好评</span>
             <span className="followDoctor_text_44">98.5%</span>
             <span className="followDoctor_text_45">评价量</span>
             <span className="followDoctor_text_46">325</span>
             <span className="followDoctor_text_47">患者量</span>
             <span className="followDoctor_text_48">715</span>
           </div>
           <div className="followDoctor_box_5 flex-row">
             <span className="followDoctor_text_49 ">￥{item.inquiry}</span>
             <span className="followDoctor_text_50">起</span>
             <span className="followDoctor_text_51">可问诊</span>
             <img alt=""
               className="followDoctor_image_5 "
               src={
                 "https://lanhu.oss-cn-beijing.aliyuncs.com/ps6kch100bvr7gpld6ocvaej0u3vhczk4u3jebf6b821-74a5-49e7-b252-d992aae1b3bb"
               }
             />
             <span className="followDoctor_text_52">￥{item.reception}</span>
             <span className="followDoctor_text_53">起</span>
             <span className="followDoctor_text_54">私人医生</span>
           </div>
         </div>
        ))}
        </Tabs.Tab>
        <Tabs.Tab title="医院" key="hospital">
            {/* 医院 */}
            <div className="hs_box_15 flex-col">
          <div className="hs_section_2 flex-row justify-between">
            <img alt=""
              className="hs_image_6"
              src={
                "https://lanhu.oss-cn-beijing.aliyuncs.com/pss7g8t2r8xneol20og5mji10ceegr8vnh96bae981-2fbe-43de-987f-188260472c98"
              }
            />
            <div className="hs_box_16 flex-col">
              <span className="hs_text_37">郑州大学第一附属医院</span>
              <span className="hs_text_38">综合医院</span>
              <div className="hs_text-wrapper_5 flex-row justify-between">
                <span className="hs_text_39">412</span>
                <span className="hs_text_40">个科室</span>
              </div>
            </div>
          </div>
          <div className="hs_text-wrapper_6 flex-row">
            <span className="hs_text_41">1873</span>
            <span className="hs_text_42">位医生</span>
            <span className="hs_text_43">已服务</span>
            <span className="hs_text_44">13.3万</span>
            <span className="hs_text_45">位患者</span>
          </div>
          <div className="hs_text-wrapper_7 flex-row">
            <span className="hs_text_46">郑州市建设东路1号</span>
          </div>
          <div className="hs_section_3 flex-row">
            <div className="hs_tag_4 flex-row">
              <span className="hs_text_47">8</span>
              <span className="hs_text_48">位医生</span>
              <span className="hs_text_49">可挂号</span>
              <img alt=""
                className="hs_image_7"
                src={
                  "https://lanhu.oss-cn-beijing.aliyuncs.com/psj7gg8vcd9c2w50wox72iaoruoohvbi9h3c8543ee-10f2-48c9-9ca9-80214765c3ff"
                }
              />
              <span className="hs_text_50">341</span>
              <span className="hs_text_51">位医生</span>
              <span className="hs_text_52">可问诊</span>
            </div>
          </div>
          </div>
            {data.map((item, index) => (
               <div className="hs_box_15 flex-col" key={index}>
               <div className="hs_section_2 flex-row justify-between">
                 <img alt=""
                   className="hs_image_6"
                   src={
                     "https://lanhu.oss-cn-beijing.aliyuncs.com/pswvpcwxlvuh4r3uelmlwfh3lr7ty7hdhrcb12fb98-0094-4065-b578-84d382b4dd3b"
                   }
                 />
                 <div className="hs_box_16 flex-col">
                   <span className="hs_text_37">{item.hname}</span>
                   <span className="hs_text_38">{item.grade}</span>
                   <div className="hs_text-wrapper_5 flex-row justify-between">
                     <span className="hs_text_39">412</span>
                     <span className="hs_text_40">个科室</span>
                   </div>
                 </div>
               </div>
               <div className="hs_text-wrapper_6 flex-row">
                 <span className="hs_text_41">1873</span>
                 <span className="hs_text_42">位医生</span>
                 <span className="hs_text_43">已服务</span>
                 <span className="hs_text_44">{item.inquiry}</span>
                 <span className="hs_text_45">位患者</span>
               </div>
               <div className="hs_text-wrapper_7 flex-row">
                 <span className="hs_text_46">{item.address}</span>
               </div>
               <div className="hs_section_3 flex-row">
                 <div className="hs_tag_4 flex-row">
                   <span className="hs_text_47">8</span>
                   <span className="hs_text_48">位医生</span>
                   <span className="hs_text_49">可挂号</span>
                   <img alt=""
                     className="hs_image_7"
                     src={
                       "https://lanhu.oss-cn-beijing.aliyuncs.com/psj7gg8vcd9c2w50wox72iaoruoohvbi9h3c8543ee-10f2-48c9-9ca9-80214765c3ff"
                     }
                   />
                   <span className="hs_text_50">341</span>
                   <span className="hs_text_51">位医生</span>
                   <span className="hs_text_52">可问诊</span>
                 </div>
                </div>
             </div>
        ))}
          

        </Tabs.Tab>
      </Tabs>
    </>
  );
}

export default Doctor;
